<template>
  <div class="micro-promotional-activities-box">
    <div class="design-preview-controller">
      <!-- 预览区域 -->
      <div class="active-goods-show">
        <div class="activet-tit-con">
          <span class="activet-tit">{{formData.activityType==1? $t('shopFeature.promotionalActivities.groupPurchase'):$t('shopFeature.promotionalActivities.spike')}}</span>
          <span class="view-more">{{$t('shopFeature.promotionalActivities.more')}}<i class="el-icon-arrow-right"
               v-if="formData.linkStyle!==1"></i></span>
        </div>
        <div class="active-goods-box"
             v-for="(item, index) in goodsList"
             :key="index">
          <div class="img-box">
            <img :src="item.pic" />
          </div>
          <div class="active-price-con">
            <span class="active-price">{{item.price}}</span>
            <span class="origin-price">{{item.oriPrice}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧编辑内容 -->
    <div class="design-editor-item design-hide-class"
         v-if="isShowEdit">
      <div class="design-config-editor">
        <div class="design-editor-component-title">{{$t('shopFeature.promotionalActivities.promotionalActivity')}}</div>
        <el-form ref="formData"
                 :model="formData"
                 label-width="100px">
          <el-form-item :label="$i18n.t('shopFeature.promotionalActivities.activityType')">
            <el-radio-group v-model="formData.activityType">
              <el-radio :label="1">{{$t('shopFeature.promotionalActivities.groupPurchase')}}</el-radio>
              <el-radio :label="2">{{$t('shopFeature.promotionalActivities.spike')}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <!-- 已添加的商品列表 -->
        <div class="goods-list" v-if="goodsList.length&&!goodsList[0].listType">
          <div class="goods-item" v-for="(item, index) in goodsList"
             :key="index">
             <div class="goods-delete-btn" @click="goodsList.splice(index,1);formData.prodIds.splice(index,1)"><i class="el-icon-close"></i></div>
            <img class="goods-pic" :src="item.pic" alt="">
            <div class="goods-info">
              <div class="goods-decs">{{item.prodName}}</div>
              <div class="goods-decs">
                <span>{{$t('shopFeature.promotionalActivities.promotionPrice')}} <i style="font-weight:blod;color:red;font-style:normal">{{item.price}}</i> </span>
                <span style="text-decoration: line-through; color:#888;padding-left:10px;">{{item.oriPrice }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-nav-add" v-if="goodsList.length<5"
               @click="addActivityProds">{{$t('shopFeature.promotionalActivities.addActivityProds')}}</div>
    </div>
    <!-- 商品选择弹窗  -->
    <prods-select v-if="dialogChooseGoods"
                  ref="ProdsSelect"
                  :isSingle="false"
                  :prodType="formData.activityType"
                  @refreshSelectProds="chooseGoodsFun"></prods-select>
    <!-- 活动商品失效提示 -->
    <el-dialog
      :title="$i18n.t('shopFeature.list.tips')"
      :visible.sync="showTipsDialog"
      width="30%">
      <span>{{$t('shopFeature.promotionalActivities.tipsContent')}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showTipsDialog = false">{{$t('shopFeature.edit.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="tipsDialogConfirm">{{$t('shopFeature.edit.confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import index from './index.js'

export default index
</script>
